<template>
  <div>
    <myHeader color="white" backgroundColor="#1d7bff" title="购物车" />
    <div class="main">
      <myGoods v-for="item in goodsList" :key="item.id" :goods="item" />
    </div>
    <myFooter @changeEV="changeFn" :arr="goodsList" />
  </div>
</template>
<script>
// 目標1：创建项目-准备组件和样式
// 1.vue create 创建项目清空欢迎界面关闭eslint代码检查
// 2.下载bootstrap less less-loader@5.0.0
// 3.main.js中引入bootstrap下css样式文件
// 4.新建4个vue文件组件-从md笔记里粘贴复制样式和标签
// 5.引入，注册，使用，放在app.vue里
// 6.中建商品不要被顶部和底部导航栏挡住，留下padding

// 目标2：头部组件 自定义
// 作用：为了让头部组件，在不同的项目里适配
// 1.myheader.vue中props定义几个变量（对象的props定义格式-类型校验）
// 2.让使用封装组件的人，传入要使用的颜色和标题

// 目标3：拿到数据
// 1.下载axios
// 2.局部引入/全局属性
// import axios from 'axios'

// 目标4：铺设数据
// 1.数据和标签的对应关系
// 2.热损失局部的形参变量，list是res内部熟悉
// 页面上不能in list也不能in restemplate模板里用的变量必须在js买模板里data/computed定义才可以使用
// 3.data里定义arr数组，吧res里list保存arr上，配合b-for循环Mygoods
// 4.传入数据对象mygoods组件内
// 5.吧对象数据铺设到标签上
// 6.把商品对象出传入Mycont.vue树龄组建中铺设v-model影响输入框显示
import myHeader from '@/components/MyHeader'
import myGoods from '@/components/MyGoods'
import myFooter from '@/components/MyFooter'

import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      // obj: []//列表
    }
  },

  components: {
    myHeader,
    myGoods,
    myFooter
  },
  created () {
    // 局部引入
    // axios({
    //   url: 'https://www.escook.cn/api/cart',
    //   method: 'get'
    // }).then((res => {
    //   console.log(res)
    // }))
    // this知道当前组件实例对象（类型VueComponent)
    // VueComponent父类是vue类
    // 原型链：一个对象访问方法时，本身没有，会逐级想_proto_向上查找，知道null。。。现在是[]
    // this.$axios({
    //   url: "/api/cart",
    //   // method: "GET" // 默认就是get请求
    // }).then((res) => {
    //   console.log(res.data.list)
    //   this.obj = res.data.list // 把数据保存到data变量中才能在页面上v-for循环
    //   console.log(this.obj)
    // })
    // console.log(this.$http)
    //  这是打印结果 ƒ wrap() {
    //   var args = new Array(arguments.length);
    //   for (var i = 0; i < args.length; i++) {
    //     args[i] = arguments[i];
    //   }
    //   return fn.apply(thisArg, args);
    // }
    // 用veux引入出来异步
    // this.$store.dispatch('asyncGetGoodsList')//直接写法
    this.asyncGetGoodsList()

  },
  computed: {
    // ...mapState(['goodsList'])
    // goodsList：映射过来的函数内反水state下goodslist值
    // 原地计算属性也叫goodList

    // 对象形式映射（自定义）
    // mapState（{goodslist:'goodsList'}
    // {goodslist:映射过来函数内反水state下goodsList值}
    // 原地就计算属性叫goodslist

    // 对象形式映射（自定义名+函数格式）
    // 自己写取值的过程，不要默认原地函数
    // 形参state就是vuex里store里state
    ...mapState({
      goodsList: (state) =>
      // 找到care模块内的goodList
      { return state.care.goodsList }
    })

    // 分模块，state受到影响
    // 1.必须用对象格式，自己写取值过程

    // 分类快+命名空间
    // 1.同上
    // 2.这次又可以回国默认的取值方式  数组 mapState('模块名'，[‘state里变量名])
  },
  methods: {
    // 用veux引入出来异步
    ...mapActions('care', ['asyncGetGoodsList']),//映射写法

    // Bool穿件来的是全选的布尔值,要遍历
    changeFn (Bool) {
      console.log(Bool)
      this.goodsList.forEach(item => {
        item.goods_state = Bool

      })
    }
  }
}
</script>
<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>